<template>
	<view>
		<view class="userBg"></view>
		<view class="userBox">
			<view class="user">
				<u-avatar  @click="go('/pages/mine/setting')" :src="info.avatar" size="60" default-url="/static/img/defult_photo.png"></u-avatar>
				<view  @click="go('/pages/mine/setting')" v-if="info.user_id" class="info">
					<view class="nick">{{info.nickname}}</view>
				</view>
				<view v-else class="info" @click="go('/pages/login/login')">
					<view class="nick">登录</view>
					<view class="desc">登录后即可体验更多服务</view>
				</view>
			</view>
			<view class="userList">
				<view class="item" @click="go('/pages/mine/myInfo')">
					<text class="num">{{info.pubs || 0}}</text>
					<text class="title">我的曲谱</text>
				</view>
				<view class="item" @click="go('/pages/mine/myCollect')">
					<text class="num">{{info.likes || 0}}</text>
					<text class="title">我的收藏</text>
				</view>
				<view class="item" @click="go('/pages/mine/myView')">
					<text class="num">{{ info.footprints || 0 }}</text>
					<text class="title">我的足迹</text>
				</view>
			</view>
		</view>
		<!-- <view class="vip">
			<view class="vipbox">
				<view class="left">
					<view class="icon">
						<u-icon name="/static/img/icon-vip.png" :size="24"></u-icon>
					</view>
					<view class="vipDesc" v-if="!info.has_vip">
						<text>开通VIP</text>
						<text>尊享更多服务</text>
					</view>
					<view class="vipDesc" v-else>
						<text>{{info.vip_type == 1 ? '尊贵VIP月卡' : '尊贵VIP年卡'}}</text>
						<text>{{info.expire_time_desc || ''}}</text>
					</view>
				</view>
				<view class="right" @click="getVip">
					<text v-if="!info.has_vip">开通</text>
					<text v-else>续费</text>
				</view>
			</view>
		</view> -->
		<view class="navList">
			<view class="head">
				<text class="titleTxt">更多服务</text>
			</view>
			<u-grid :border="false" col="4">
				<u-grid-item @click="go('/pages/mine/post')">
					<u-icon :customStyle="{paddingTop:40+'rpx'}" name="/static/img/icon-post.png" :size="32"></u-icon>
					<text class="grid-text">发布曲谱</text>
				</u-grid-item>
				<!-- <u-grid-item>
					<u-button open-type="contact">
						<u-icon :customStyle="{paddingTop:40+'rpx'}" name="/static/img/icon-service.png" :size="32"></u-icon>
						<text class="grid-text">联系客服</text>
					</u-button>
				</u-grid-item> -->
				<u-grid-item @click="go('/pages/mine/feedback')">
					<u-icon :customStyle="{paddingTop:40+'rpx'}" name="/static/img/icon-feed.png" :size="32"></u-icon>
					<text class="grid-text">意见反馈</text>
				</u-grid-item>
				<u-grid-item @click="showMpoacode = true">
					<u-icon :customStyle="{paddingTop:40+'rpx'}" name="/static/img/icon-gzh.png" :size="32"></u-icon>
					<text class="grid-text">联系客服</text>
				</u-grid-item>
				<u-grid-item @click="go('/pages/mine/setting')">
					<u-icon :customStyle="{paddingTop:40+'rpx'}" name="/static/img/icon-set.png" :size="32"></u-icon>
					<text class="grid-text">账号设置</text>
				</u-grid-item>
			</u-grid>
		</view>
		<u-popup mode="bottom" :show="showMpoacode" @close="showMpoacode=false" round="10" :safeAreaInsetBottom="false">
			<view class="flex-oa" style="width: 100%;height:500rpx;text-align: center;">
				<u--image :src="info.mpoacode" width="500rpx" height="500rpx"></u--image>
			</view>
			<!-- <view style="width:100%;position:relative;height:400rpx;background:gray;">
			 <official-account style=""></official-account>
			</view> -->
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showMpoacode: false,
				info:{},
				// avatar:''
			};
		},
		onShow(){
			if(!uni.getStorageSync('LOGIN_TOKEN_KEY')){
				uni.navigateTo({
					url: "/pages/login/login"
				});
				return;
			}
			// this.qu
			this.getInfo();
		},
		methods: {
			getVip(){
				var url = '/pages/mine/vip/buy';
				if(this.info.has_vip && this.info.vip_type == 1){
					url = '/pages/mine/vip/buy?current=1'
				}
				this.go(url);
			},
			getInfo(){
				 uni.$u.http.get('/User/center?stat=1',{}).then(async res =>{
				 	this.info = res
				
				 }).catch(err => {
				 })
			},
			go(e){
				uni.navigateTo({
					url: e
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.userBg{
	background-color: #23c993;
	height: 200rpx;
	width: 750rpx;
	position: absolute;
}
.userBox{
	position: relative;
	z-index: 2;
	background-color: #fff;
	margin-left: 30rpx;
	margin-right: 30rpx;
	padding: 40rpx;
	border-radius: 10rpx;
	box-shadow: 0rpx 0rpx 16rpx rgba(0,0,0,0.1);
	.user{
		display: flex;
		align-items: center;
		.info{
			margin-left: 30rpx;
			.nick{
				font-size: 40rpx;
				margin-bottom: 10rpx;
			}
			.desc{
				font-size: 24rpx;
			}
		}
	}
	.userList{
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		.item{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.num{
				font-size: 40rpx;
				font-weight: 600;
			}
			.title{
				font-size: 28rpx;
			}
		}
	}
}
.vip{
	margin-top: 40rpx;
	padding: 0 30rpx;
	.vipbox{
		background: linear-gradient(90deg, #f0d8a8, #dcb570);
		border-radius: 12rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left{
			display: flex;
			align-items: center;
		}
		.icon{
			width: 64rpx;
			height: 64rpx;
			border-radius: 64rpx;
			background-color: #634f36;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.vipDesc{
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
			text{
				&:nth-child(1){
					font-size: 32rpx;
					font-weight: bold;
				}
				&:nth-child(2){
					font-size: 24rpx;
				}
			}
		}
	}
}
.navList{
	margin-top: 40rpx;
	padding: 0 30rpx;
	.head{
		.titleTxt{
			font-size: 36rpx;
			font-weight: 600;
		}
	}
	.grid-text{
		font-size: 26rpx;
	}
}
.flex-oa{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
</style>
